<template>
	<view class="Timewrap" v-if="show">
		<view class="uni-padding-wrap"><!-- <view class="uni-title showTitle">日期：{{ year }}年{{ month }}月{{ day }}日  {{ hour }}:{{ minute }}</view> --></view>
		<view class="flex u-text-center title">
			<view class="width-20">年</view>
			<view class="width-20">月</view>
			<view class="width-20">日</view>
			<view class="width-20">星期</view>
			<view class="width-20">时</view>
			<view class="width-20">分</view>
		</view>
		<picker-view  class="heigh300" indicator-class='avtiveTab' :value="value" @change="bindChange">
			<picker-view-column>
				<view class="item" v-for="(item, index) in years" :key="index">{{ item }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in months" :key="index">{{ item }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in days" :key="index">{{ item }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in weeks" :key="index">{{ item }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in hours" :key="index">{{ item }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in minutes" :key="index">{{ item }}</view>
			</picker-view-column>
		</picker-view>
		<view class="flex btn ">
			<view class="width-50" @click="colse">
				取消
			</view>
			<view class="width-50 u-text-right color-FBB000" @click="getTime">
				保存
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const date = new Date();
		const years = [date.getFullYear()];
		const year = date.getFullYear();
		const months = [date.getMonth() + 1];
		const month = date.getMonth() + 1;
		const str = '星期' + '日一二三四五六'.charAt(date.getDay());
		const days = [date.getDate()];
		const day = date.getDate();
		const weeks = [str];
		const week = str;
		const hours = [];
		const hour = date.getHours(); //获取当前小时数(0-23)
		const minutes = [];
		const minute = date.getMinutes(); //获取当前分钟数(0-59)
		for (let i = 0; i <= 23; i++) {
			if (i < 10) {
				hours.push('0' + i);
			} else {
				hours.push(String(i));
			}
		}

		for (let i = 0; i <= 59; i++) {
			if (i < 10) {
				minutes.push('0' + i);
			} else {
				minutes.push(String(i));
			}
		}
  // console.log(hour,minute)
		return {
			title: 'picker-view',
			years,
			year,
			months,
			month,
			days,
			day,
			weeks,
			week,
			hours,
			hour,
			minutes,
			minute,
			weekday: 0,
			value: [0, 0, 0, 0, hour, minute],
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`
		};
	},
	props: ['show'],
	created() {
		this.getDays();
	},
	methods: {
		getDays() {
			//获取系统当前时间

			var now = new Date();
			var nowTime = now.getTime();
			var oneDayTime = 24 * 60 * 60 * 1000;
			var timeArr = [];
			var timeStr = '';
			for (var i = 1; i < 7; i++) {
				//显示星期
				var ShowTime = nowTime + i * oneDayTime;
				//初始化日期时间
				var myDate = new Date(ShowTime);
				var year = myDate.getFullYear();
				var month = myDate.getMonth() + 1;
				var date = myDate.getDate();
				var str = '星期' + '日一二三四五六'.charAt(myDate.getDay());
				timeStr = year + '-' + month + '-' + date + '-' + str 
				timeArr.push(timeStr);
			}

			let years = [],
				months = [],
				days = [],
				weeks = [],
				hours = [],
				Minutes = [];
			timeArr.forEach(it => {
				let item = it.split('-');
				years.push(Number(item[0]));
				months.push(Number(item[1]));
				days.push(item[2]);
				weeks.push(item[3]);
			});
			this.years = Array.from(new Set(this.years.concat(years)));
			this.months = Array.from(new Set(this.months.concat(months)));
			this.days = this.days.concat(days);
			this.weeks = this.weeks.concat(weeks);
		},
		bindChange: function(e) {
			const val = e.detail.value;
			this.year = this.years[val[0]];
			this.month = this.months[val[1]];
			this.day = this.days[val[2]];
			this.week = this.weeks[val[2]];
			this.hour = this.hours[val[4]];
			this.minute = this.minutes[val[5]];
			this.value = val;
			this.$set(this.value, 3, val[2]);
			// this.getTime()
		},
		getTime(){
			let time = {
				year: this.year,
				month: this.month,
				day: this.day,
				week: this.week,
				hour: this.hour,
				minute: this.minute
			};
			this.$emit('getTimeVal', time);
		},
		colse(){
			this.$emit('close', false);
		}
	}
};
</script>

<style scoped lang="scss">
.Timewrap {
	width: 100%;
	height: 420rpx;
	overflow: hidden;
	.showTitle {
		position: relative;
		z-index: 997;
		background: #ffffff;
	}
	.heigh300 {
		width: 100%;
		height: 400rpx;
		margin-top: -128rpx;
		overflow: hidden;
		/deep/ .uni-picker-view-indicator {
			height: 78rpx;
			line-height: 78rpx !important;
		}
		/deep/ .avtiveTab{
			color: #FBB000 !important;
		}
		.item {
			text-align: center;
		}
	}
	.btn{
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
}
.title {
	width: 100%;
	height: 70rpx;
	line-height: 70rpx;
	background: #eeeeee;
	position: relative;
	z-index: 997;
}
</style>
